<template>
  <div id="category" :class="[fun.isIphoneX() ? 'iphoneXStyle' : '']">
    <!-- <c-title :hide="true" text=''></c-title> -->
    <div style="display: flex;">
      <div class='template_four_goods_category' @click="onChangeGoods(item)"  v-for="item in category_template_four_set" :key="item">
        <template v-if="item.is_show">
          <span :class="current_goods_key==item.key?'active fz30':''">{{item.key=='shop'?'自营商品':'抖音商品'}}</span>
          <span :class="current_goods_key==item.key?'template_four_goods_category_line':''"></span>
        </template>
      </div>
    </div>
    <div class="search-box">
      <div class="search-content" style="height: 4.2vh;" @click="gotosearch">
        <i class="iconfont icon-sousuo1"></i>
        <template v-if="(category_template == '04' && current_goods_key == 'tiktok')">
          输入关键词/口令搜索
        </template>
        <template v-else>
          {{ $i18n.t("category.搜索商品") }}
        </template>

      </div>
    </div>

    <div id="category-content" ref="menucontent" v-if="!fun.isTextEmpty(list) || !fun.isTextEmpty(onelist)" :style="{ overflow: this.category_template == '01' || category_template == '04' ? 'hidden' : 'scroll' }">
      <div id="err" v-if="err">{{ $i18n.t("category.未检测到子分类数据") }}!</div>

      <div class="goodsList" ref="goodsWrapper" style="overflow: hidden; height: 92vh;" v-if="!err && (category_template == '02' || category_template == '03')">
        <div>
          <c-carcontent hide="true" :list="contentlist_one" v-if="category_template == '02'"> </c-carcontent>
          <c-carcontent4 hide="true" :list="contentlist_one" :parentTitle="parentTitle" @bindOneCategory="bindOneCategory" v-if="category_template == '03'"> </c-carcontent4>
          <span id="loadMore" style="display: inline-block; width: 100%; height: 5rem;"></span>
        </div>
      </div>

      <div id="carcontent2"  v-if="!err && category_template == '01' || category_template == '04' ">
        <!-- 模板4 自营商品  -->
        <template v-if="current_goods_key == 'shop'">
          <div class="branch" ref="imgBox" v-show="!fun.isTextEmpty(ADImg)">
            <a :href="ADUrl | href_filters">
              <img style="width: 100%; max-height: 40vh;" :src="ADImg" />
            </a>
          </div>
          <!-- 分类下拉框 -->
          <div class="catagoryBox" v-if="checkPlugin">
            <van-collapse v-model="activeName" :border="false">
              <van-collapse-item name="1">
                <div slot="title" class="activetitle">
                  <!-- 自定义标题 -->
                  <dl v-show="!fun.isTextEmpty(showTitle)">
                    <dt v-for="(o, index) in showTitle" :key="index" :class="o.id == secondaryId ? 'addClass' : 'removeClass'" @click.stop="clickActive(o)">{{ o.name }}</dt>
                  </dl>
                  <span v-show="fun.isTextEmpty(showTitle)">{{ $i18n.t("category.选择分类") }}</span>
                </div>
                <div style="overflow-y: scroll; max-height: 32vh;">
                  <dl>
                    <dt v-for="(Secondary, index) in list.recommend" :key="index" :class="Secondary.id == secondaryId ? 'addClass1' : 'removeClass1'" @click.stop="chooseSecondary(Secondary)">
                      {{ Secondary.name }}
                    </dt>
                    <dt v-show="isCategoryMore" @click.stop="getMoreData_1(0)" class="more-btn-class">查看更多<i class="iconfont icon-member-bottom"></i></dt>
                  </dl>
                  <template v-if="list.set && list.set.cat_level == '3' && !fun.isTextEmpty(threeInfo)">
                    <p class="threeTitle">{{ SecondaryName||$i18n.t("category.三级分类") }}</p>
                    <dl>
                      <dt v-for="(three, indexs) in threeInfo" :key="indexs" :class="three.id == threeId ? 'three-addClass' : 'three-removeClass'" @click="chooseThree(three.id)" class="three-btn">{{ three.name }}</dt>
                    </dl>
                  </template>
                </div>
                <div class="f-10 c-bbb flex-c mt-18" @click.stop="activeName=[]">点击收起 <i class="iconfont icon-member-bottom"></i></div>

                <p v-if="fun.isTextEmpty(list.recommend)">{{ $i18n.t("category.暂无其他分类") }}</p>
              </van-collapse-item>
            </van-collapse>
          </div>
          <!-- 排序筛选框 -->
          <c-sort :show="true" @sortIn="sortOut" @showscreen="showbox" text="搜索结果" v-if="checkPlugin"></c-sort>
          <div class="goodsList" ref="goodsWrapper" style="overflow: hidden;">
            <div class="coverLayer" v-if="this.activeName == '1'" @click="change"></div>
            <div>
              <div class="goodWrapper" :style="{ backgroundColor: category_template == '01' ? '#fff' : '#f4f4f4' }" v-if="!this.fun.isTextEmpty(foodInfo)">
                <div class="list" :class="`category_template${category_template}`" v-for="(good, indexs) in foodInfo" :key="indexs" @click="gotoGoods(good.goods_id, good)">
                  <div class="img">
                    <img :src="good.thumb" />
                  </div>
                  <li class="goods-info">
                    <ul class="info-class">
                      <li class="info_a" style="-webkit-box-orient: vertical;">
                        <div class="goods-title">{{ good.title | escapeTitle }}</div>
                        <div class="goods-label-box" v-if="good.label_list&&good.label_list.length>0">
                          <span class="goods-label" v-for="(labelItem) in good.label_list" :key="labelItem.id">{{labelItem.name}}</span>
                        </div>
                      </li>
                      <li class="info_b" v-if="!fun.getGlobalParameter('hide_total_sales',false)">{{ $i18n.t("category.已售") }}{{ good.show_sales + good.virtual_sales }}{{ good.sku }}</li>
                      <li :class="info_c_height(good)">
                        <template v-if="good.point_goods">
                          <span class="price" style="color: #ff9500;">
                            <small>{{
                              good.has_option == 1
                                ? !good.point_goods.max_point || good.point_goods.min_point == good.point_goods.max_point
                                  ? good.point_goods.min_point
                                  : good.point_goods.min_point + "-" + good.point_goods.max_point
                                : good.point_goods.min_point
                            }}</small
                            ><small>{{ integral }}</small>
                          </span>
                        </template>
                        <template v-else>
                          <span :class="price_hidden(good)">
                            <small>{{$i18n.t("money")}}</small>{{checkPrice(good)}}
                          </span>
                        </template>
                        <template v-if="category_template != '04' && good.is_special != 1">
                          <!--good.is_special 特殊商品加入购物车隐藏-->
                          <div class="select" v-if="good.has_option != 1 && good.plugin_id != 40">
                            <transition name="fade">
                              <i v-if="goodsCarts[good.id]" class="iconfont icon-life-game-sign" @click.stop="numberLeft(good.id)"></i>
                            </transition>
                            <input
                              type="tel"
                              title="number"
                              v-if="goodsCarts[good.id] && !goodsCarts[good.id].option_str"
                              @click.stop
                              v-model.lazy="goodsCartsTotal[good.id].total"
                              @focus="clickCount(goodsCartsTotal[good.id].total)"
                              @blur="changeCount(goodsCarts[good.id].id, goodsCartsTotal[good.id].total, 0, good)"
                            />
                            <span v-if="goodsCarts[good.id] && goodsCarts[good.id].option_str" @click.stop>{{ goodsCartsTotal[good.id].total }}</span>
                            <i @click.stop="numberRight(good.id, good.stock, good)" class="iconfont" :class="goodsCarts[good.id] && !goodsCarts[good.id].option_str?'icon-life-game-plus':'icon-gouwuche2'"></i>
                          </div>
                          <!-- 分类页返回了plugin_id:0||商城商品，plugin_id：40||租赁，plugin_id：92||供应商商品 140卡券商品-->
                          <div class="select optionClass" v-if="good.has_option == 1 && good.plugin_id != 40 && good.plugin_id != 140">
                            <i style="background-color: #f15353;" class="iconfont icon-gouwuche2" @click.stop="addGood(good)"></i>
                            <i class="cart-num" v-if="!fun.isTextEmpty(goodsCartsTotal[good.id])">{{ goodsCartsTotal[good.id].total }}</i>
                          </div>
                          <span class="select leaseBox" v-if="good.plugin_id == 40">
                            {{ $i18n.t("category.去租赁") }}
                          </span>
                        </template>
                        <template v-if="category_template == '04'">
                          <div class="select">
                            <i class="iconfont icon-gouwuche2"></i>
                          </div>
                        </template>
                      </li>
                      <div class="price" v-show="good.is_open_micro == 1" style="font-size: 0.75rem;">
                        {{vip_price_txt}} {{ $i18n.t("money") }}{{ checkVipPrice(good) }}
                      </div>
                      <div class="pass_price" v-if="good.pass_price">
                        {{good.pass_price.name}}:{{good.pass_price.price}}
                      </div>
                    </ul>
                  </li>
                </div>
                <div class="space">{{ LoadMoreTest }}</div>
              </div>
              <div v-if="this.fun.isTextEmpty(foodInfo)">
                <img src="../../assets/images/no-more-product.png" alt="" style="width: 5rem; margin-top: 6rem;" />
              </div>
              <span id="loadMore" style="display: inline-block; width: 100%; height: 5rem;"></span>
            </div>
          </div>
        </template>
         <!-- 模板4 抖音商品  -->
        <template v-if="current_goods_key == 'tiktok'">
          <div class="nav">
            <div class="tab">
              <span @click="choose(1)" :class="{ active: choose_index == 1 }">综合</span>
              <span @click="choose(2)"
                :class="{ active: choose_index == 2, up: sort.up == 1 && choose_index == 2, down: sort.down == 1 && choose_index == 2 }"
                class="grid-content">销量</span>
              <span @click="choose(3)"
                :class="{ active: choose_index == 3, up: sort.up == 1 && choose_index == 3, down: sort.down == 1 && choose_index == 3 }"
                class="grid-content">价格</span>
            </div>
          </div>
          <div class="goodsList"  ref="TikTokWrapper" style="overflow: hidden; background: #f1f1f1;">
            <div>
                <div class="goodWrapper tiktok-list"  style="height: 100%;">
                  <div class="list-item" v-for="item in tiktok_list" :key="item.id" @click="link_tiktok_cps(item)">
                    <div class="img">
                      <van-image width="100%" height="100%" :src="item.cover"  />
                    </div>
                    <div style="padding: 0.25rem; width: 100%;">
                      <div class="title">{{ item.title }}</div>
                      <div class="item-center">
                        <div class="make-money" v-if="item.share_reward">
                          <span class="p-4 fs-10 line">赚</span>
                          <span class="p-4 fs-10">{{ item.share_reward }}</span>
                        </div>
                        <div class="buy">{{ item.sales }}</div>
                      </div>
                      <div class="item-bottom">
                        <div class="c-FF6238" style="font-size: 0.75rem; flex-shrink: 0;">
                          到手价
                          <span style="font-size: 0.875rem;">{{ $i18n.t('money') }}{{ item.coupon_price }}</span>
                        </div>
                        <div class="fs-12 c-999 line-through" style="flex-shrink: 0;">{{ $i18n.t('money') }}{{ item.price }}</div>
                      </div>
                    </div>
                  </div>
                </div>
                <span id="loadMore" style="display: inline-block; width: 100%; height: 5rem;"></span>
            </div>
          </div>
        </template>
      </div>

    </div>
    <div id="rootlists" ref="menu">
      <ul id="rootList" v-if="onelist">
        <template v-if="current_goods_key=='shop'">
          <li @click="bpfun" v-if="brandShow == '0'">
            <span>{{ $i18n.t("category.推荐品牌") }}</span>
          </li>
          <li @click="allList" v-if="categoryShow == '0'" :class="{ active: active2 }">
            <span>{{ $i18n.t("category.推荐分类") }}</span>
          </li>
        </template>
        <li v-for="(item, index) in onelist" :key="index" :class="{ active: active == index }" @click="tabsa(index, item)">
          <span>{{ item.name }}</span>
        </li>
        <div style="height: 8.125rem;"></div>
      </ul>
    </div>
    <!--选规格-->
    <van-popup v-model="show2" round position="center">
      <div class="spec_box q5" :style="{ width: fun.getPhoneEnv() == 3 ? '375px' : '' }">
        <div class="flex-c good-spec-popup">
          <img :src="popThumb" alt="">
          <div class="title clamp-2">{{ popTitle }}</div>
        </div>
        <div class="spec_a">
          <div v-for="(spec, i) in goodsInfo.has_many_specs" :key="i">
            <h5>{{ spec.title }}：</h5>
            <ul class="option">
              <li @click.stop="selectSpecs(item, item.id)" v-for="(item, i) in spec.has_many_specs_item" :key="i" :class="specid.indexOf(item.id) >= 0 ? 'cur' : ''">
                {{ item.title }}
              </li>
            </ul>
          </div>
        </div>
        <div class="add_car">
          <ul class="car_btn flex-c">
            <li class="left" v-if="goodsInfo.point_goods">
              {{ popPrice }}<span>{{ integral }}</span>
            </li>
            <li class="left" v-else>
              <div class="good-price">
                <span>{{ $i18n.t("money") }}</span
                >{{ popPrice }}
              </div>
              <div class="vip-price" v-if="isMultiSpecs">
                <van-loading class="m-l-w6" size="16" color="#fdbc2e" v-show="specsVIPPrc == 0" />
                <span class="m-l-w6" v-show="specsVIPPrc">&nbsp;{{vip_price_txt}} {{ $i18n.t("money") }}{{ specsVIPPrc }} </span>
              </div>
            </li>
            <li class="right">
              <span v-show="!popNum && popStock >= 1" @click.stop="submitAction">{{ $i18n.t("category.加入购物车") }}</span>
              <span v-show="popStock <= 0" style="background: #999;">库存不足</span>
            </li>
            <div class="Box" v-show="popNum >= 1">
              <i class="iconfont icon-store_reduceLine" @click.stop="changeCount(popCard.id, popNum - 1, -1)"></i>
              <label class="show">{{ popNum }}</label>
              <i class="iconfont icon-store_plus" @click.stop="changeCount(popCard.id, popNum + 1, 1)"></i>
            </div>
          </ul>
        </div>
      </div>
    </van-popup>

    <goodScreen v-model="showGoodScreen" @clone="cloneGoodScreen" :showCategory="true">
      <!-- 筛选弹窗 -->
    </goodScreen>
    <div style="height: 2.8125rem;"></div>
  </div>
</template>

<script>
import category from "./category_controller";
export default category;
</script>

<style lang="scss" rel="stylesheet/scss">
#category {
  .fz30 {
    font-size: 0.9375rem;
  }

  .template_four_goods_category {
    position: relative;
    padding: 0.75rem;
    margin-right: 0.625rem;
    margin-bottom: 0.5rem;

    .active {
      color: #f15353;
    }
  }

  .template_four_goods_category .template_four_goods_category_line {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50%;
    background-color: #f15353;
    height: 0.1875rem;
    border-radius: 6.25rem;
  }

  .van-collapse::after {
    border: none;
  }

  .van-collapse-item__content {
    padding: 12px 10px;
  }

  .catagoryBox {
    .van-cell__title {
      overflow: hidden;
    }
  }
}

/* 增加底部适配层 */
.iphoneXStyle #category-content,
#rootlists {
  padding-bottom: 24px;
}

#rootlists {
  overflow: hidden;
}
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
@import "../../assets/css/category.scss";

.f-10 {
  font-size: 0.625rem;
}

.f-14 {
  font-size: 0.875rem;
}

.c-bbb {
  color: #bbb;
}

.flex-c {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mt-15 {
  margin-top: 1.125rem;
}

.clamp-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#category {
  #rootlists,
  #category-content {
    height: 92vh;
  }

  .spec_box {
    width: 16.875rem;
    background: #fff;
    border-radius: 0.5rem;
    padding: 0.75rem;

    .good-spec-popup {
      align-items: flex-start;

      img {
        width: 2.8125rem;
        height: 2.8125rem;
        background: #ededed;
        border-radius: 2px;
        margin-right: 6px;
      }

      .title {
        flex: 1;
        font-size: 13px;
        text-align: left;
        line-height: 1.125rem;
      }
    }

    .spec_a {
      margin-top: 0.625rem;
      height: 12rem;
      overflow-y: scroll;

      h5 {
        display: block;
        line-height: 2.5rem;
        font-size: 0.75rem;
        text-align: left;
      }

      .option {
        display: flex;
        flex-wrap: wrap;

        .cur {
          border: solid 0.0625rem #f15353;
          color: #f15353;
          background-color: rgba($color: #f15353, $alpha: 0.1);
        }

        li {
          font-size: 11px;
          padding: 0 0.875rem;
          line-height: 1.5625rem;
          margin-right: 0.625rem;
          margin-bottom: 0.625rem;
          background: #ededed;
          border: solid 0.0625rem #ededed;
          border-radius: 0.1875rem;
        }
      }
    }

    .add_car {
      padding-top: 0.75rem;
      width: 100%;
      border-top: solid 0.0625rem #ebebeb;

      .car_btn {
        justify-content: space-between;
        height: 100%;

        .left {
          color: #f15353;
          font-size: 16px;
          text-align: left;
          flex: 1;
          display: flex;
          flex-direction: column;
          align-items: center;

          .good-price,
          .vip-price {
            width: 100%;
          }

          .good-price {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .vip-price {
            font-size: 10px;
            color: #fdbc2e;
          }

          span {
            font-size: 10px;
          }
        }

        .right span {
          display: block;
          width: 5.5625rem;
          height: 1.875rem;
          line-height: 1.875rem;
          border-radius: 1rem;
          background: #f15353;
          color: #fff;
          font-size: 14px;
        }

        .Box {
          display: flex;

          i {
            width: 28px;
            height: 1.75rem;
            line-height: 1.75rem;
            font-size: 26px;
            color: #f15353;
          }

          .icon-store_reduceLine {
            color: #aaa;
          }

          label {
            right: 2.1875rem;
            color: #333;
            font-size: 12px;
            padding: 0;
            width: 1.5rem;
            height: 1.75rem;
            overflow: hidden;
            display: inline-block;
            text-align: center;
            line-height: 1.75rem;
            vertical-align: top;
            background-origin: content-box;
            background-color: transparent;
          }
        }
      }
    }
  }

  #carcontent2 {
    color: #686868;
    margin-bottom: 3.75rem;
    margin-top: 3%;
    display: flex;
    flex-direction: column;
    height: 100%;

    .active {
      color: #ef5452;
    }

    .content {
      background: #fff;
    }

    .tab {
      display: flex;
      justify-content: space-evenly;
      padding-top: 10px;
      padding-bottom: 12px;

      .grid-content::after {
        content: "";
        display: inline-block;
        width: 0.5rem;
        height: 0.625rem;
        background: url(../../assets/images/jd-sprites.png) no-repeat;
        background-size: 12.5rem 12.5rem;
        background-position: -10.625rem -1.875rem;
        margin-left: 0.25rem;
      }

      .grid-content.up,
      .grid-content.down {
        color: #f15353;
      }

      .grid-content.up::after {
        background-position: -10.625rem -0.9375rem;
      }

      .grid-content.down::after {
        background-position: -10.625rem 0;
      }
    }

    .branch {
      margin: 0 8px;

      a {
        display: inline-block;
        height: 100%;

        img {
          border-radius: 0.5rem;
          overflow: hidden;
        }
      }
    }

    .catagoryBox {
      // overflow: hidden;
      position: relative;
      height: 2.8125rem;
      z-index: 999;

      .threeTitle {
        height: 2rem;
        line-height: 2rem;
        font-size: 0.75rem;
        color: #202020;
        text-align: left;
      }

      dl {
        display: flex;
        flex-wrap: wrap;

        dt {
          min-width: 3.625rem;
          font-size: 0.6875rem;
          height: 1.6875rem;
          line-height: 1.6875rem;
          padding: 0 0.375rem;
          border-radius: 0.875rem;
          margin-right: 0.5rem;
          margin-bottom: 0.5rem;
          color: #696969;
          background: #f8f8f6;
        }

        .addClass,
        .addClass1 {
          color: #fb4a4a;
          background-color: rgba($color: #f15353, $alpha: 0.1);
        }

        .three-btn {
          padding: 0 0.75rem;
          height: 1.25rem;
          line-height: 1.25rem;
          font-size: 11px;
          border-radius: 2px;
          border: 1px solid #fff;
          background: #fff;
        }

        .three-addClass {
          color: #f15353;
          border: 1px solid #f15353;
        }

        .more-btn-class {
          background: transparent;
          border: none;
          color: #fb5050;
          display: flex;
        }
        // dt:first-of-type {
        //   margin-left: 0;
        // }
      }

      .activetitle {
        overflow-x: auto;

        dl {
          flex-wrap: nowrap;

          dt {
            flex-shrink: 0;
            margin-bottom: 0;
            height: 24px;
            line-height: 24px;
          }
        }
      }
    }

    .goodsList {
      background: #fff;
      position: relative;
      flex: 1;

      .coverLayer {
        //遮盖层
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 0;
        z-index: 99;
      }

      .goodWrapper {
        height: 100%;
        padding: 0 0.5rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }

      .goodWrapper::after {
        display: block;
        background: transparent;
        content: " ";
        width: 100%;
        height: 3.625rem;
      }

      .space {
        width: 100%;
        height: 8.625rem;
        margin-top: 0.5rem;
      }

      .category_template01 {
        display: flex;
        padding: 0 0 1rem 0;
        width: 100%;

        .img {
          width: 5rem;
          height: 5rem;
          border-radius: 0.3125rem;
          overflow: hidden;
          // margin-right: 0.625rem;
          img {
            width: 100%;
          }
        }

        .goods-info {
          padding-left: 0.625rem;

          .info-class .info_c .select .iconfont {
            width: 1.25rem;
            height: 1.25rem;
            line-height: 1.25rem;
            font-size: 14px;
          }
        }
      }

      .category_template04 {
        width: 49%;
        background: #fff;
        margin-top: 0.625rem;
        border-radius: 0.5rem;
        overflow: hidden;

        .img {
          width: 100%;
          height: 0;
          padding-bottom: 100%;
          position: relative;

          img {
            width: 100%;
            right: 0;
            height: 100%;
            position: absolute;
          }
        }

        .goods-info {
          padding: 0.25rem;

          .info-class .info_c .select i {
            font-size: 10px;
            width: 1rem;
            height: 1rem;
            line-height: 1rem;
          }
        }
      }

      .goods-info {
        flex: 1;
        text-align: left;

        .info-class {
          .info_a {
            margin-bottom: 0.25rem;

            .goods-title {
              line-height: 1.25rem;
              font-size: 0.8125rem;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              color: #000;
            }

            .goods-label-box {
              margin: 0.5rem 0;
              max-height: 30px;
              text-align: left;
              font-size: 12px;
              color: rgb(136, 136, 136);
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              word-break: break-all;

              .goods-label {
                margin-right: 6px;
              }
            }
          }

          .info_b {
            color: #999;
            // line-height: 1.25rem;
            // margin-bottom: 0.125rem;
            // text-decoration: line-through;
            font-size: 0.625rem;
          }
          .info_c_height{
            height: auto !important;
          }
          .info_c {
            display: flex;
            justify-content: space-between;
            height: 1.25rem;
            align-items: flex-end;

            .price {
              color: #f15353;
              font-size: 0.875rem;
              flex: 1;
              font-weight: bold;
              small {
                font-size: 0.625rem;
                font-weight: 400;
              }
            }
            .price_hidden {
              overflow: hidden; /* 超出部分隐藏 */
              text-overflow: ellipsis; /* 超出部分显示省略号 */
              white-space: nowrap; /* 规定段落中的文本不进行换行 */
            }
            .standard {
              button {
                height: 1.25rem;
                width: 2.5rem;
                background-color: #f15353;
                border: none;
                border-radius: 0.75rem;
                color: #fff;
              }
            }

            .select {
              display: flex;

              span {
                outline: none;
                border: none;
                display: inline-block;
                width: 1.25rem;
                height: 1.25rem;
                line-height: 1.25rem;
                font-size: 14px;
                text-align: center;
              }

              input {
                outline: none;
                border: none;
                display: inline-block;
                width: 1.25rem;
                height: 1.25rem;
                line-height: 1.25rem;
                font-size: 14px;
                text-align: center;
              }

              i:first-child {
                background-color: #ccc;
              }

              i:last-child {
                background-color: #f15353;
              }

              i {
                text-align: center;
                border-radius: 0.75rem;
                color: #fff;
              }
            }

            .leaseBox {
              padding: 0 0.5rem;
              background: #f15353;
              color: #fff;
              line-height: 1.25rem;
              height: 1.25rem;
              border-radius: 1rem;
              font-size: 12px;

              p {
                font-size: 0.75rem;
              }
            }

            .optionClass {
              position: relative;

              .cart-num {
                min-width: 1rem;
                height: 1rem;
                line-height: 1rem;
                font-size: 10px;
                position: absolute;
                top: -11px;
                right: -5px;
                color: #2c2c2c;
                border: 1px solid #fff;
                background-color: #fc3 !important;
              }
            }
          }
        }
      }
    }
  }
}

.pass_price {
  text-align: left;
  font-size: 0.625rem;
  color: #867e7e;
}

.tiktok-list {
  height: 100%;

  .ml-12 {
    margin-left: 0.75rem;
  }

  .line-through {
    text-decoration: line-through;
  }

  .c-999 {
    color: #999;
  }

  .fs-12 {
    font-size: 0.75rem;
  }

  .ml-4 {
    margin-left: 0.25rem;
  }

  .c-FF6238 {
    color: #ff6238;
  }

  .item-bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .fs-10 {
    font-size: 0.625rem;
  }

  .p-4 {
    padding: 0.1rem 0.25rem;
  }

  .make-money {
    border-radius: 0.25rem;
    display: flex;
    justify-content: space-between;
    color: #ff7b05;
    border: 1px solid #ff7b05;

    .line {
      position: relative;

      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 0.0313rem;
        height: 100%;
        background: #ff7b05;
      }
    }
  }

  .item-center {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 0.25rem 0;
  }

  .title {
    // display: flex;
    text-align: left;
    line-height: 1.25rem;
    font-size: 0.8125rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    color: #000;
  }

  .buy {
    color: #999;
    font-size: 0.75rem;
  }

  .img {
    width: 100%;
    // height: 10.5938rem;
  }

  .list-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 48%;
    overflow: hidden;
    background: #fff;
    border-radius: 0.5rem;
    overflow: hidden;
    margin: 0.2rem 0;
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background: #f1f1f1;
    padding-bottom: 3.125rem;
    padding-top: 0.5rem;
  }

  .grid-content::after {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.625rem;
    background: url(/../../../assets/images/jd-sprites.png) no-repeat;
    background-size: 12.5rem 12.5rem;
    background-position: -10.625rem -1.875rem;
    margin-left: 0.25rem;
  }

  .grid-content.up,
  .grid-content.down {
    color: #f15353;
  }

  .grid-content.up::after {
    background-position: -10.625rem -0.9375rem;
  }

  .grid-content.down::after {
    background-position: -10.625rem 0;
  }

  .active {
    color: #ef5452;
  }

  .tab {
    display: flex;
    justify-content: space-evenly;
    padding-top: 10px;
    padding-bottom: 12px;
  }

  .current_category {
    color: var(--themeBaseColor);
  }
}
</style>
